<template>
  <div class="app-container">
    <el-row v-loading.fullscreen.lock="loading">
      <el-col :span="24" class="header-layout">
        <div class="" style="display: flex;justify-content: flex-start">
          <connect-chose module="git" @change="changeConnName" v-model="connName" />

          <el-select class="margin-left" v-model="repository" size="small" filterable @change="loadBranches">
            <el-option v-for="repo in repositories" :value="repo" :label="repo" />
          </el-select>
          <el-button type="text" icon="el-icon-edit" size="small" @click="addUrlDialog.show = true" >新建</el-button>
          <el-button type="text" class="margin-left margin-right" :disabled="!repository" size="small" icon="el-icon-bottom-left" @click="pull">pull</el-button>

<!--          <el-select v-model="branch"-->
<!--                     size="small"-->
<!--                     filterable @change="switchBranch"-->
<!--                     style="width: 300px;"-->
<!--                     v-loadmore="loadMore"-->
<!--          >-->
<!--            <el-option v-for="branch in branches" :key="branch.branchName" :label="branch.branchName" :value="branch.branchName" />-->
<!--          </el-select>-->
          <el-select size="small"
            v-model="branchInfo.current"
                     style="width: 300px"
                     v-loadmore="loadMore"
                     filterable
                     placeholder="分支名称"
                     remote
                     :remote-method="filterBranches"
                     @change="switchBranch"
          >
            <el-option v-for="branch in branchInfo.branches" :key="branch.branchName" :label="branch.branchName" :value="branch.branchName"  />
          </el-select>
        </div>

        <div class="right-info">
          <el-checkbox v-model="lock.force" class="margin-left " :disabled="!lock.state">强制</el-checkbox>
          <el-button type="primary" class="margin-left" size="small" >{{ lock.title }}</el-button>
        </div>
      </el-col>

    </el-row>

    <el-row class="margin-top">
      <el-col :span="15">
        <commit ref="commit" :group="connName" :repository="repository"
                @switchBranch="switchBranch"
                @selection-change="selectionChange"
        />
      </el-col>
      <el-col :span="9" class="padding">
        <diffchange :group="connName" :repository="repository" :commits="choseCommits" />
      </el-col>
    </el-row>

    <!-- 添加仓库 -->
    <el-dialog v-loading="addUrlDialog.loading" :visible.sync="addUrlDialog.show" title="添加克隆">
      <el-form ref="addUrlDialogForm" :model="addUrlDialog.input" size="small" label-width="80px" :rules="addUrlDialog.rules">
        <el-form-item label="分组" prop="group">
          <connect-chose module="git" @change="changeAddRepositoryGroup" v-model="addUrlDialog.input.group"/>
        </el-form-item>
        <el-form-item label="地址" prop="url">
          <el-input v-model="addUrlDialog.input.url" placeholder="输入仓库地址" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="cloneRepository">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commit from '@/views/call/vcs/git/commit'
import diffchange from '@/views/call/vcs/git/diffchange'
import ConnectChose from '@/views/components/ConnectChose'

import vcs from '@/api/vcs'

export default {
  name: 'git',
  components: {commit,diffchange,ConnectChose},
  data(){
    return {
      connName: null,
      repository: null,
      branch: null,
      repositories: [],
      branches: [],
      branchInfo:{
        current: null,
        pageInfo: {
          pageNo: 1,
          pageSize: 20
        },
        branches: [],
        filterValue: null
      },
      choseCommits: [],
      lock: {
        state: true,
        title: '解锁',
        force: false
      },
      loading: false,
      addUrlDialog: {
        loading: false,
        show: false,
        groups: [],
        input: {
          group: null,
          url: null
        },
        rules: {
          group: [{ required: true, trigger: 'blur', message: '分组必填' }],
          url: [{ required: true, trigger: 'blur', message: '仓库地址必填' }]
        }
      },
    }
  },
  methods: {
    loadMore(){
      // console.log('加载更多分支')
      this.branchInfo.pageInfo.pageNo++
      this.loadPageBranches()
    },
    filterBranches(inputValue){
      this.branchInfo.pageInfo = {pageNo: 1, pageSize: 20}
      this.branchInfo.filterValue = inputValue
      this.loadPageBranches()
    },
    loadPageBranches(){
      let filterParam = {group: this.connName,repository: this.repository,filterValue: this.branchInfo.filterValue}
      vcs.git.filterPageBranches(filterParam,this.branchInfo.pageInfo).then(res => {
        this.branchInfo.branches = res.data.branches
        this.branchInfo.current = res.data.currentBranchName
      })
    },
    changeAddRepositoryGroup(group){
      this.addUrlDialog.input.group = group
    },
    cloneRepository(){
      this.$refs['addUrlDialogForm'].validate((valid) => {
        if (valid) {
          this.addUrlDialog.loading = true
          vcs.git.cloneRepository(this.addUrlDialog.input.group,this.addUrlDialog.input.url).then(res => {
            this.addUrlDialog.show = false
            // 刷新仓库信息
            this.loadRepositories(this.connName)
            this.addUrlDialog.loading = false
          }).catch(res => {
            this.addUrlDialog.loading = false
          })
        }
      })
    },
    pull(){
      vcs.git.pull(this.connName,this.repository).then(res => {
        // pull 后需要刷新提交记录和分支列表
        this.loadBranches(this.repository)

        this.$refs.commit.loadCommits()
      })
    },
    changeConnName(connName){
      this.connName = connName;

      // 加载仓库信息
      this.loadRepositories(connName)
    },
    loadRepositories(group){
      vcs.git.repositories(group).then(res => {
        this.repositories = res.data

        if (this.repositories !== null && this.repositories.length > 0){
          this.loadBranches(this.repositories[0])
        }

      })
    },
    loadBranches(repository){
      this.repository = repository

      // 加载分支列表
      // vcs.git.branches(this.connName,repository).then(res => {
      //   this.branches = res.data.branches
      //   this.branch = res.data.currentBranchName;
      // })
      this.filterBranches(null)
    },
    switchBranch(branch){
      this.loading = true
      vcs.git.switchBranch(this.connName,this.repository,branch).then(res => {
        this.loading = false
        this.branch = branch

        // 调用子组件重新加载提交记录列表
        this.$refs.commit.loadCommits()
      }).catch(res => {
        this.loading = false
      })

    },
    selectionChange(selection){
      // console.log(selection,'selection')
      this.choseCommits = selection.map(item => item.commitId);
    },
  }
}
</script>

<style scoped>
.header-layout{
  display: flex;
}
.header-layout .right-info{
  flex: 1;
  text-align: right;
}
</style>
